<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框按钮类型(input box button type)</title>
  <!-- 
    HTML和CSS中的输入框按钮（Input Box Button）是常见的表单元素，可以用于接收用户输入并触发相应的操作。以下是关于HTML和CSS中输入框按钮类型的主要要点： 
 
      1. 输入框（Input Box）：使用 <input> 标签定义输入框，通过 type="text" 指定为文本输入框类型，用户可以在其中输入文本信息。 
      2. 按钮（Button）：使用 <input> 标签定义按钮，通过 type="button" 指定为按钮类型，用于触发特定的操作或事件。 
      3. 提交按钮（Submit Button）：使用 <input> 标签定义提交按钮，通过 type="submit" 指定为提交按钮类型，用于提交表单数据至服务器。 
      4. 重置按钮（Reset Button）：使用 <input> 标签定义重置按钮，通过 type="reset" 指定为重置按钮类型，用于清空表单中的输入内容。 
      5. 自定义样式（Custom Styling）：可以使用CSS样式来自定义输入框和按钮的外观，如设置背景颜色、边框样式、字体样式等。 
      6. 按钮事件（Button Events）：可以使用JavaScript来处理按钮的事件，如点击事件、鼠标悬停事件等，实现交互功能。 
      7. 表单处理（Form Handling）：输入框按钮通常用于表单中，可以通过HTML表单元素和属性来处理用户输入和(type="submit")提交操作。 
   -->
</head>
<body>
  
  <form action="">
    <div class="text">
      <input type="text">
      <input type="password">
    </div>
    <div class="button">
      <input type="button" value="普通按钮">
      <button>普通按钮</button>
    </div>
    <div class="reset">
      <input type="reset" value="重置按钮">
      <button type="reset">重置按钮</button>
    </div>
    <div class="submit">
      <input type="submit" value="提交按钮">
      <button type="submit">提交按钮</button>
    </div>
  </form>

</body>
</html>